<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图 -->
    <el-card>
      <!-- 添加角色按钮区域 -->
      <el-row>
        <el-col>
          <el-button type="primary" @click="showAddCateDialog()">添加分类</el-button>
        </el-col>
      </el-row>

      <el-table :data="cateList" row-key="cat_id" border :tree-props="{ children: 'children' }">
        <el-table-column type="index"></el-table-column>
        <el-table-column prop="cat_name" label="分类名称" sortable width="180"></el-table-column>
        <el-table-column label="是否有效" sortable width="180">
          <template slot-scope="scope">{{ scope.row.cat_deleted ? '有效' : '无效' }}</template>
        </el-table-column>
        <el-table-column label="排序">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.cat_level === 0" type="primary">一级</el-tag>
            <el-tag v-if="scope.row.cat_level === 1" type="success">二级</el-tag>
            <el-tag v-if="scope.row.cat_level === 2" type="warning">三级</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="editCate(scope.row)">
              <i class="el-icon-edit"></i>
            </el-button>
            <el-button size="mini" type="danger" @click="delCate(scope.row)">
              <i class="el-icon-delete"></i>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog title="添加分类" :visible.sync="addCateDialog.visible" width="50%">
      <el-form :model="addCateDialog.formData" label-width="100px">
        <el-form-item label="分类名称：">
          <el-input v-model="addCateDialog.formData.cat_name"></el-input>
        </el-form-item>
        <el-form-item label="父级分类：">
          <el-cascader
            v-model="selectKeys"
            :options="goodCateList"
            :props="props"
            @change="handleChange"
          ></el-cascader>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addCateDialog.visible = false">取 消</el-button>
        <el-button type="primary" @click="addCateDialog.visible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cateList: [],
      queryInfo: {
        pagenum: 1,
        pagesize: 5
      },
      addCateDialog: {
        visible: false,
        formData: {
          cat_name: ''
        }
      },
      props: {
        value: 'cat_id',
        label: 'cat_name',
        children: 'children',
        expandTrigger: 'hover',
        checkStrictly: true
      },
      goodCateList: [],
      selectKeys: []
    }
  },
  methods: {
    async getCateList() {
      const { data: res } = await this.$http.get('categories', {
        params: this.queryInfo
      })
      console.log(res)
      if (res.meta.status !== 200) {
        return this.$message.error('获取分类列表数据失败！')
      }
      this.cateList = res.data.result
    },
    delCate(cate) {
      console.log(cate)
    },
    editCate(cate) {
      console.log(cate)
    },
    showAddCateDialog() {
      this.addCateDialog.visible = true
    },
    async getGoodCateList() {
      const { data: res } = await this.$http.get('categories', {
        params: {
          type: 2
        }
      })
      console.log(res)
      if (res.meta.status !== 200) {
        return this.$message.error('err')
      }
      this.goodCateList = res.data
    },
    handleChange() {}
  },
  mounted() {
    this.getCateList()
    this.getGoodCateList()
  }
}
</script>

<style lang="less" scoped>
</style>